import FirstTitle from "@/components/FirstTitle";
import SubTitle from "@/components/subTitle";
import EffectContainer from "@/components/effectContainer";
import { useEffect, useState } from "react";
import "./index.scss";
import { getCode } from "@/api/codeApi.ts";
import Code from "@/components/code";
export const BorderHighlight = () => {
  const [code, setCode] = useState("");
  const [cssCode, setCssCode] = useState("");
  useEffect(() => {
    getCode("/borderHighlight/代码.txt").then(({ data }) => {
      setCode(data);
    });
    getCode("/borderHighlight/css代码.txt").then(({ data }) => {
      setCssCode(data);
    });
  }, []);
  useEffect(() => {
    const container: any = document.querySelector(".border-container");
    const cards: any = document.querySelectorAll(".border-card");
    container.onmousemove = function (e) {
      for (const card of cards) {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        card.style.setProperty("--x", `${x}px`);
        card.style.setProperty("--y", `${y}px`);
      }
    };
  }, []);
  return (
    <>
      <FirstTitle title="边框高亮"></FirstTitle>
      <SubTitle title="效果"></SubTitle>
      <EffectContainer
        effect={
          <div className="border-container">
            {new Array(6).fill(0).map((_, index) => {
              return (
                <div className="border-card" key={index}>
                  <div className="border-inner">
                    段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
                  </div>
                </div>
              );
            })}
          </div>
        }
        code={<Code content={code}></Code>}
        css={<Code type="css" content={cssCode}></Code>}
      ></EffectContainer>
    </>
  );
};
